<#cenluan title="写笔记" validate="true" markdown="true" uploader="true">
    <ol class="breadcrumb">
        <li><a href="/blog">笔记</a></li>
        <li class="active">写笔记</li>
    </ol>
    <form class="form-horizontal" id="blogForm" method="post" action="/blog/save">
        <div class="form-group">
            <label class="col-md-2 control-label">标题</label>

            <div class="col-md-10">
                <input class="form-control" type="text" name="blog.title"
                       required minlength="1" maxlength="32">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">内容</label>

            <div class="col-md-10">
                <textarea name="blog.content" id="content"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">文章类型</label>

            <div class="col-md-10">
                <label class="radio-inline">
                    <input type="radio" name="blog.type" value="ORIGINAL" checked="checked">原创
                </label>
                <label class="radio-inline">
                    <input type="radio" name="blog.type" value="COPY" id="checkbox-type-copy">转载
                </label>
            </div>
        </div>
        <div class="form-group" style="display:none" id="form-referer">
            <label class="col-md-2 control-label">原文链接</label>

            <div class="col-md-10">
                <input class="form-control" type="text" name="blog.referer" minlength="12" maxlength="1000">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">隐私设置</label>

            <div class="col-md-10">
                <label class="radio-inline">
                    <input type="radio" name="blog.privacy" value="false" checked="checked">公开
                </label>
                <label class="radio-inline">
                    <input type="radio" name="blog.privacy" value="true">私有
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-3 col-md-offset-2 mb20">
                <button class="btn btn-primary btn-block" type="submit">提交发表</button>
            </div>
            <div class="col-md-4">
                <p class="form-control-static text-danger" id="error-msg"></p>
            </div>
        </div>
    </form>

    <script>
        $(function () {
            //markdown
            $("#content").markdown({
                language: "zh",
                resize: "vertical",
                fullscreen: false,
                width: "100%",
                height: "300"
            });
            $("[name='blog.type']").click(function () {
                if (this.value == "COPY") {
                    $("#form-referer").show();
                } else {
                    $("#form-referer").hide();
                }
            });
            $("#blogForm").validate({
                rules: {
                    "blog.referer": {
                        required: function () {
                            return $("#checkbox-type-copy").is(":checked");
                        }
                    }
                },
                submitHandler: function (form) {
                    $(form).find(":submit").button("loading");
                    $(form).ajaxSubmit(function (json) {
                        if (!json.ok) {
                            setErrorMsg(json.msg);
                            $(form).find("button").button("reset");
                            return;
                        }
                        location = "/blog?show=mine";
                    });
                }
            });
            function setErrorMsg(msg) {
                var timeId = $("#error-msg").data("time");
                if (timeId) {
                    clearTimeout(timeId);
                }
                $("#error-msg").text(msg);
                timeId = setTimeout(function () {
                    $("#error-msg").empty();
                }, 2000);
                $("#error-msg").data("time", timeId);
            }
        });
    </script>
</#cenluan>